<template>
    <el-container style="height:100%; border: 0px solid #000">
      <el-main>
        <el-row>
          <el-col :span="4">
            <el-input placeholder="请输入关键字" v-model="serach">
              <el-button slot="append" icon="el-icon-search" @click="requestGridData"></el-button>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-tooltip class="item" effect="dark" content="停用" placement="top">
              <el-button  @click="disableBtnClick" plain>停用</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="发布" placement="top">
              <el-button  @click="enableBtnClick" plain>发布</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('base.create')" placement="top">
              <el-button  type="primary" icon="el-icon-plus" @click="addBtnClick"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('base.refresh')" placement="top">
              <el-button  icon="el-icon-refresh" circle @click="handleRefresh"></el-button>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          ref="quality"
          stripe
          :height="tableHeight"
          style="width: 100%;"
          border
          v-loading="loading"
          element-loading-text="数据加载中。。。"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" v-if="false" label="主键" ></el-table-column>
          <el-table-column prop="name" :label="$t('quality.name')"></el-table-column>
          <el-table-column prop="applyColumnType" :label="$t('quality.rulejb')"></el-table-column>
          <el-table-column prop="type" :label="$t('quality.ruletype')"></el-table-column>
          <el-table-column prop="description" :label="$t('quality.ruledesc')"></el-table-column>
          <el-table-column prop="publishState" :label="$t('quality.state')" :formatter="format"></el-table-column>
          <el-table-column prop="updateTime" :label="$t('quality.updatetime')" :formatter="formatter"></el-table-column>
          <el-table-column prop="enable" :label="$t('quality.creator')" ></el-table-column>
          <el-table-column :label="$t('base.action')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>
              <el-popover placement="top" :ref="'popover-'+ scope.row.id">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleDelete(false,scope.$index, scope.row)"
                  >取消</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleDelete(true,scope.$index, scope.row)"
                  >确定</el-button>
                </div>
                <el-button v-if="scope.row.publishState!=1" slot="reference" size="mini" icon="el-icon-delete"></el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </el-main>
    </el-container>
</template>
<script>
export default {
  //初始化数据
  data() {
    return {
      tableHeight: window.innerHeight - 180,
      serach: "",
      tableData: [],
      currentPage: 1,
      pagesize: 10,
      total: 500,
      loading: false,
      title: "",
      treeNode: {},
      quality: {
        id: "",
        name: "",
        description: "",
        applyColumnType: "",
        enable: 0,
        publishState: 0,
        type: "",
        conditionType: 0,
        conditionExp: "",
        createTime: "",
        updateTime: "",
        creator: 0,
        updateId: 0,
      }
    };
  },
  components: {
    //自定义标签
  },
  //方法
  methods: {
    //每页显示数据个数变化时调用
    handleSizeChange(val) {
      this.pagesize = val;
      this.requestGridData();
    },
    //页码变化时调用
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestGridData();
    },
    //编辑
    handleEdit(index, row) {
       this.$router.push({
        name:'add',
        params: {
          quality:row
        }
      })
    },
    //删除
    handleDelete(flag, index, row) {
      this.$refs["popover-" + row.id].doClose();
      var _this = this;
      if (flag) {
        this.axios
          .post(this.HOST + "/del", {id:row.id})
          .then(function(res) {
            console.log(res);
            debugger;
            _this.handleRefresh();
            _this.$message({
              message: "操作成功!",
              type: "success"
            });
          })
          .catch(function(err) {
            _this.$message.error("操作失败" + err);
          });
      }
    },
    //新增按钮事件
    addBtnClick() {
      this.$router.push("/add");
    },
    disableBtnClick(){
      var _this = this;
      debugger;
      var selectRows = this.$refs.quality.selection;
      if(selectRows.length == 0){
        _this.$message({
              type: "error",
              message: "至少选择一行数据！"
            });
      }else{
      var ids = "";
      for(var i = 0 ; i < selectRows.length ; i++){
        if(i == 0){
          ids += selectRows[i].id;
        }else{
          ids += ","+selectRows[i].id;
        }
      }
      this.axios
        .post(this.HOST + "/update/state", {
          ids:ids,
          state:2
        })
        .then(function(res) {
          if(res.data){
            _this.$message({
              type: "success",
              message: "操作成功"
            });
          }
          _this.requestGridData();
        })
        .catch(function(err) {
          console.log(err);
        });
        }
    },
    enableBtnClick(){
      var _this = this;
      var selectRows = this.$refs.quality.selection;
       if(selectRows.length == 0){
        _this.$message({
              type: "error",
              message: "至少选择一行数据！"
            });
      }else{
      var ids = "";
      for(var i = 0 ; i < selectRows.length ; i++){
        if(i == 0){
          ids += selectRows[i].id;
        }else{
          ids += ","+selectRows[i].id;
        }
      }
      this.axios
        .post(_this.HOST + "/update/state", {
          ids:ids,
          state:1
        })
        .then(function(res) {
          if(res.data){
            _this.$message({
              type: "success",
              message: "操作成功"
            });
          }
          _this.requestGridData();
        })
        .catch(function(err) {
          console.log(err);
        });
      }
    },
    //
    lookBtnClick() {
      this.$message({
        type: "success",
        message: "点击了查看按钮"
      });
    },
    //刷新按钮
    handleRefresh() {
      this.requestGridData();
    },
    //关闭按钮 子组件和父组件通信
    dialogClose(data) {
      console.log(data);
      this.retLookup();
    },
    //保存按钮  子组件和父组件通信
    dialogSave() {
      this.retLookup();
      this.requestGridData();
    },
    //请求数据
    requestGridData() {
      var _this = this;
      this.axios
        .post(this.HOST + "/page", {
          page: _this.currentPage,
          rows: _this.pagesize,
          name: _this.serach,
        })
        .then(function(res) {
          _this.tableData = res.data.datas;
          _this.total = res.data.totalCount;
          _this.loading = false;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    //子组件数据清空
    retLookup() {
      this.lookup = {
        id: "",
        name: "",
        code: "",
        sortno: "",
        remark: ""
      };
    },
    formatter (row,ele,value) {
      let fmt = "yyyy-MM-dd hh:mm:ss";
      let $this = new Date(value);
      let o = {
        'M+': $this.getMonth() + 1,
        'd+': $this.getDate(),
        'h+': $this.getHours(),
        'm+': $this.getMinutes(),
        's+': $this.getSeconds(),
        'q+': Math.floor(($this.getMonth() + 3) / 3),
        'S': $this.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    },
    format(row,ele,value){
      if(value == 0){
        return "新建";
      }else if(value == 1){
        return "发布";
      }else{
        return "停用";
      }
    }
  },
  //加载时调用方法 函数
  mounted() {
    this.requestGridData();
  }
};
</script>
<style scoped>
.el-col {
  margin-bottom: 10px;
}
.el-pagination {
  position: absolute;
  right: 20px;
  margin-top: 25px;
}
.el-popover__reference {
  margin-left: 10px;
}
.el-main {
  padding-top:10px;
}
</style>

